@import "manage-comment.scss";
@import "daterangepicker.scss";

$mainColor:#23a8f5;

/*---------------------------------------------
 * Util
 --------------------------------------------*/
body{
    font-family: "微软雅黑",arial;
    color:#333;
}

/**tooltip**/
.tooltip-inner{
    padding:0 12px;
    height:34px;
    line-height: 34px;
    border-radius:2px;
    font-size:14px;
}

/**end**/
    
.team-information .btn-select
,.projects-course .btn-select{
    position:relative;
    top:0;
    right:8px;
    font-size:14px;
    color:#9e9da4;
    
    &:hover{color:$mainColor;}
    
    i{
        cursor:pointer;
        &:hover{color:$mainColor;}
    }
    
    span{
        border:1px solid #f2f2f2;
        position:absolute;
        left:50%;
        margin-left:-55px;
        top:21px;
        background-color:#fff;
        display:none;
        z-index:999;
        box-shadow:0 0 8px #E1E1E1;
        
        i{
            display:block;
            width:110px;
            height:25px;
            line-height:25px;
            text-align:center;
            color:#333;
            
            &:first-child{border-bottom:1px solid #f2f2f2;}
        }
        
    }
}

.bg-white{background-color:#fff;}

.elli{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right-box{
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
}

.hand{
    position:relative;
    width:100%;
    height:20px;
    line-height:20px;
    
    .handing{
        font-family: "微软雅黑",arial;
        position:absolute;
        top:0;
        left:0;
        margin:0;
        font-size:18px;
        color:#333;
        letter-spacing: 1px;;
    }

    .add,
    .edit{
        display:block;
        position:absolute;
        top:0;
        right:0;
        color:$mainColor;
        cursor:pointer;
    }
}

.base-message,
.projects-course,
.team-information{
   margin-top:20px;
   padding:30px 60px; 
}

/*---------------------------------------------
 * 模态框（modal）
 ---------------------------------------------*/
.modal.fade .modal-dialog{
    width:100%;
    height:100%;
    margin-top:0;
}

@media (min-width: 768px){
    .modal-dialog {
        margin:0;
    }
}

.modal-content{
    width:780px;
    margin:0 auto;
    border-radius:0; 
    overflow:hidden;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.modal-header{
    height:60px;
    color:#333;
    padding-top:18px;
    box-sizing:border-box;
    background-color:#f1f1f1;
}

.modal-body{
    width:100%;
    padding:0;
    font-size:14px;
    color:#333;
    
    .bd-box {
        width: 490px;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .item{
        padding-left:30px;
        padding-right:30px;
        border-bottom:1px solid #f1f1f1;   
    }
    
    .add{
        color:$mainColor;
        cursor:pointer;
        margin-right:30px;
        
        i{
            position:relative;
            top:1px; 
            margin-right:10px;
        }
    }
   
}

.modal-footer{
    padding:30px 40px;
    border-top:0;
    
    .btn{
        width:140px;
        height:40px;
        font-size:14px;
        border-radius:0;
        border:0;
        outline:0;
    }
    
    .save{
        background-color:$mainColor;
        color:#fff;
    }

}

.item-label{
    display:inline-block;
    height:40px;
    line-height:40px;
    position:relative;
    box-sizing:border-box;
    white-space: nowrap;
}

.project-bewrite,
.project-brief{
    margin-top:20px;
    margin-bottom:20px;
}

.comment-text,
.modal input{
    height:40px;
    line-height:40px;
    outline:0; 
    color:#222;
    background-color:#f7f7f7;
    border:1px solid #f2f2f2;
    box-sizing:border-box; 
}

.comment-text{
    width:618px;
    resize:none;
    padding:0;
    padding-left:20px;
    overflow:hidden;
    
    &:focus{
        border-color:$mainColor;
        box-shadow:0 0 5px $mainColor;
    }
}

.focus{
    height:120px;
    line-height:180%;
    padding:7px 20px;
    word-wrap:break-word;
    word-break:break-all;
    overflow:auto;
    overflow-x:hidden;
}

.modal input{
    display:inline-block;
    margin-left:0;
    padding-left:20px;
    padding-right:20px;
    
    &:focus{
        border-color:$mainColor;
        box-shadow:0 0 5px $mainColor;
    }
}

.item-tips{
    position:relative;
    top:-15px;
    padding-right:30px;
    box-sizing:border-box;
}

.err{
    color:#e53f42;
    margin-left:110px;
    margin-top:10px;
}
    
.show-word{
    display:none;
    color:#666;
    
    i{
        color:$mainColor;
        padding-left:3px;
        padding-right:3px;
        font-size:18px;
        position:relative;
        top:1px;
    }
}

.add-btn{
    margin-left:90px;
    margin-bottom:40px;
    height:30px;
    line-height:30px;
    
    i{
        color:$mainColor; 
        font-size:30px;
        margin-right:10px;
        cursor:pointer;
        
    }
    
    span{
        font-size:14px;
        position:relative;
        top:-6px;
    }
}

span.blue-start {
    padding-left: 5px;
    padding-right: 5px;
    color: #23a8f5;
    font-size: 21px;
    position: relative;
    top: 7px;
}

.call-name {
    width: 75px;
    white-space: nowrap;
}

//下拉选框
.select-box {
    width: 415px;
    border: 1px solid #23a8f5;
    border-radius: 4px;
    position: relative;
    top: -12px;
    
    a {
        display: block;
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #666;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
        
        i {
            font-size: 21px;
            color: #999;
        }
    }
    
    .btn-unfold {
        color: #999; 
    }

    .options,.options i{
        display: none;
    }
    
    .options-item {
        cursor: pointer;
        
        &:hover {
            color: #333;
            background-color: #f4f8fb;
        }
    }
    
    .options-item:last-child {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    
    .options .selected {
        color: #333;
        background-color: #f4f8fb;
        
        i {
            display: inline-block;
            color:$mainColor;
        }
    }
}
/*确认删除*/
#del-modal{
    .modal-body{
        width:100%;
        
        .text-tip {
            margin: 0 auto;
            width: 780px;
            height: 114px;
            line-height:134px;
            text-align: center;
            overflow: hidden;
            font-size:16px;
        }
    }
    
    .modal-footer{
        text-align: center;
        .cancel {
            width: 140px;
            height: 50px;
            line-height: 50px;
            padding: 0;
            border: 0;
            background-color: #f1f1f1;
            border-radius: 2px;
        }
        
        .confirm {
            width: 200px;
            height: 50px;
            line-height: 50px;
            padding: 0;
            border: 0;
            border-radius: 2px;
            background-color: #23a8f5;
        }
        
        .btn+.btn {
            margin-left: 20px;
        }
    }
}
/*添加跟进人*/
#add-people-modal{
    .modal-content{width:720px;}
    
    .item{
        padding-top:10px;
        padding-bottom:10px;
    }
    
    .add{
        height:40px;
        line-height:40px;
    }
    
    #search-person{
        width:618px; 
        background-color:transparent; 
        border:0; 
        box-shadow:none; 
        padding:0;
    }
    
    .select-people{
        display:none;
        
        p{margin-bottom:0;}
        
        span{
            display:inline-block;
            height:35px;
            line-height:35px;
        }
    }
    
    .selected{
        margin-bottom:30px;
        
        span{
            margin-top:10px;
            margin-right:10px;
            padding:7px 10px;
            background-color:#e9f6fe;
            color:$mainColor;
            border-radius:4px;
        }
        
        .handing{
            background-color:inherit;
            color:inherit;
            padding-left:0;
            margin-left:0;
        }
        
        .name{
            padding-left:10px;
            padding-right:20px;
        }
        
        .del{
            cursor:pointer;
        }
    }

}

/*非跟进人提示框*/
#no-permission-modal{
    .modal-body .text-tip {
        margin: 0 auto;
        width: 780px;
        height: 114px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        font-size: 16px;
    }
    
    .modal-footer .confirm {
        width: 200px;
        height: 50px;
        line-height: 50px;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background-color: #23a8f5;
    }
    
    .modal-footer{text-align:center; padding-top:0;}
    .modal-content{border-radius:6px;}
}



/*项目重要历程*/
#project-course-modal{
    
    .item{
        padding:30px 40px 10px 40px;
    }
    
    .item-label{width:80px;}
    
    .main-message{position:relative;}
    
    .date-picker{cursor:pointer;}
    
    .err{margin-left:100px;}
    
}

/*团队信息*/
#team-modal{
    
    .item{
        padding:30px 40px 10px 40px;
        box-sizing:border-box;
    }
    
    .main-message{
        height:40px;
        line-height:40px;
        
        span+input{
            width:140px;
            margin-right:25px;
        }
        
        .actor+input,.phone+input{margin-left:10px;}
    }
    
    .comment-text{width:608px;}
    
    span{display:inline-block;}
    
    .item-label{
        width:90px;
        padding-left:14px;
        
        &:after{
            display:block;
            content:"✲";
            color:$mainColor;
            position:absolute;
            top:0;
            left:0;
        }
    }
    
}

/*基本信息*/
#base-message-modal{
    
    .item{
        padding:30px 40px 10px 40px;
        box-sizing:border-box;
    }
    
    .project-name input{width:618px;}
    
    .book-name{
        display:block;
        width:150px;
        height:40px;
        line-height:40px;
        margin-right:20px;
        color:$mainColor;
        text-decoration: underline;
        cursor:pointer;
    }
    
    .select{
        position:relative;
        width:130px;
        
        input{width:130px;}
        
        &>i{
            position:absolute;
            top:12px;
            right:12px;
            font-size:21px;
            color:#b2b2b2;
        }
        
        .options-box{
            position:absolute;
            left:0;
            top:41px;
            width:100%;
            max-height:250px;
            overflow:auto;
            overflow-x:hidden;
            border:1px solid $mainColor;
            box-shadow:0 0 3px $mainColor;
            background-color:#fff;
            z-index:1999;
            display:none;
            
            .options{
                display:block;
                height:40px;
                line-height:40px;
                cursor:pointer;
                padding-left:20px;
                padding-right:8px;
                text-align:left;
                color:#666;
                box-sizing:border-box;
                
                &:hover{
                    background-color:#f4f8fb;
                    color:#333;
                }
                
                i{
                   display:none;
                }
            }
            
            .selected{
                background-color:#f4f8fb;
                color:#333;
                
                i{
                    font-size:24px;
                    color:$mainColor;
                    display:block;
                }
            }
        }
    }

    .mar-left{
        margin-left:20px;
    }
    
    .mar-top{margin-top:20px;}
    
    .equity{width:130px;}
    
    .link{
        width:260px;
        height:40px;
    }
    
    .upload-btn{
        color:$mainColor;
        cursor:pointer;
        
        i{
            position:relative;
            top:1px;
            margin-right:10px;
        }
    }
    
    .tag-text{
        width:100px;
        margin-right:25px;
    }
    
    .tag-box {
        width:424px;
        
        .tag{
            display:inline-block;
            height:40px;
            line-height:40px;
            padding-left:20px;
            padding-right:10px;
            background-color:#f7f7f7;
            border:1px solid #f2f2f2;
            box-sizing:border-box;
            margin-right:10px;
            margin-bottom:10px;
            
            i.del{
                cursor:pointer;
                margin-left:15px;
                color:#b2b2b2;
                
                &:hover{color:$mainColor;}
            }
        }
    }
    
    
}

.upload{
    width:60px; 
    height:40px; 
    line-height:40px; 
    position:relative; 
    overflow:hidden;
}

#file{
    width:200px; 
    height:100%; 
    position:absolute; 
    right:0; 
    top:0;  
    cursor:pointer; 
    opacity:0;
    filter:alpha(opacity=0);
}

/*---------------------------------------------
 * 头部(Header)
 ---------------------------------------------*/
.header{
    //height:183px;
    min-width:720px;
    padding:40px 60px;
    box-sizing:border-box;
    color:#333;
}

#logoButton{
    cursor:pointer;
}

.projects-logo{
    width:100px;
    height:100px;
    background-color:#f2f2f2;
    margin-right:40px;
    
    .first-word{
        line-height:100px;
        font-size:56px;
        color:$mainColor; 
    }
}
    
.title{
    width:620px;
    height:100px;
    margin-top:30px;
    position:relative;
    font-size:22px;
    
    p{
        max-width:100%;
        margin-bottom:0;
        height:30px;
    }
    
}

@media screen and (min-width: 1300px){
    .title{
        margin-top:0;
    }
}

.button{
    height:40px;
    margin-top:30px;
    margin-left:auto;
    margin-right:40px;
    
    &:last-child{margin-right:0;}
    
    p{
        display:inline-block;
        margin-bottom:0;
        width:180px;
        height:40px;
        line-height:40px;
        font-size:14px;
        color:#808080;
        border:1px solid #808080;
        box-sizing:border-box;
        
        cursor:pointer;
    
        &:hover{
            color:#fff;
            background-color:$mainColor;
            border-color:$mainColor;
        }
    
    }

}

.follow-people span{margin-left:5px;}

/*--------------------------------------------
 * 导航（Nav)
 -------------------------------------------*/
.project-navbar{
    height:60px;
    line-height:60px;
    margin-top:20px;
    
    ul{
        width:664px;
        margin:0 auto;
        padding:0;
        list-style-type: none;
        
        li{
            float:left;
            margin-left:66px;
            &:first-child{margin-left:0;}
        }
        
        a{
            display:inline-block;
            width:80px;
            height:60px;
            color:#666;
            font-size:16px;
            box-sizing:border-box;
            border-bottom:3px solid #fff;
            
            &:hover{
                color:$mainColor;
                border-bottom:3px solid $mainColor;
            }
            
            &:active{
                color:$mainColor;
                border-bottom:3px solid $mainColor;
            }
            
            
        }
    }
    
    .current-view{
        color:$mainColor;
        border-bottom:3px solid $mainColor;
    }
}

/*--------------------------------------------
 * 项目基本信息（Base message)
 -------------------------------------------*/
.brief{
    margin-top:22px;
    line-height:180%;
    color:#7f7f7f;
}

.projects-file{
    margin-top:20px;
    color:#222;
    
    .link{margin-left:80px;}
    
    a{
        color:$mainColor;
        text-decoration: underline;
    }
}

.sort{
    display:inline-block;
    color:#222;
    font-size:14px;
    background-color:#f5f8f9;
    margin-top:30px;
    padding-bottom:18px;
    box-sizing:border-box;
    
    span{
        display:block;
        padding-left:40px;
        padding-right:40px;
        margin-top:18px;
        
        i{
            margin-right:10px;
            font-size:24px;
            color:$mainColor;
            position:relative;
            top:2px;
        }
    }
}

.tag .tit{
    margin-left:0;
    padding-left:0;
    background-color:inherit;
    color:#222;
}

.tag span{
    margin-top:10px;
    margin-left:10px;
    padding:7px 10px;
    color:$mainColor;
    background-color:#e9f6fe;
    border-radius:4px;
}

/*-------------------------------------------
 * 项目重要历程（Project course)
 ------------------------------------------*/
.message{
    font-size:14px;
    
    .message-item{
        margin-top:30px;
    }
    
    p{
        margin:0;
    }
    
    .icon-circle{
        display:inline-block;
        width:16px;
        height:16px;
        margin-right:20px;
        background-color:#8bcef5;
        border-radius:50%;
        position:relative;
        top:1px;
        left:0;
        
        &:after{
            display:block;
            content:"";
            width:10px;
            height:10px;
            border-radius:50%;
            background-color:$mainColor;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
    }
    
    .time{
        margin-right:12px;
        color:#222;
        position:relative;
        top:-2px;
    }
    
    .text{
        margin-left:36px;
        color:#666;
        position:relative;
        top:-2px;
    }
}

/*-------------------------------------------
 * 团队信息（Team information)
 ------------------------------------------*/
.people-message{
    padding-top:30px;
    padding-bottom:30px;
    border-bottom:1px solid #f1f1f1;
    box-sizing:border-box;
    
    .people-info{
        margin-bottom:20px;
    }
    
    .people-name{
        font-size:18px;
        color:#222;
    }
    
    .info{
        padding-left:16px;
        font-size:16px;
        color:#999;
    }
    
    .people-link{
        height:30px;
        line-height:30px;
        border-radius:15px;
        background-color:#f5f8f9;
        padding-left:15px;
        padding-right:15px;
    }
    
    .phone{
        color:$mainColor;
    }

}


/*--------------------------------------------
 * 上传进度条(progress bar)
 --------------------------------------------*/
.pmgressbar-box{
    height:40px; 
    margin-left:20px;
    display:none;
}

.pmgressbar{
    width:200px;
    height:16px;
    border-radius:8px;
    background-color:#f5f5f5;
    overflow:hidden;
    position:relative;
    top:12px;
    margin-right:20px;
    
    span{
        position:absolute;
        left:0;
        top:0;
        width:60%;
        height:100%;
        background-color:#e10005;
    }
}

.pmgressbar-cancel{
    width:16px;
    height:16px;
    line-height:16px;
    border-radius:50%;
    background-color:#ccd1d9;
    position:relative;
    top:12px;
    cursor:pointer;
    
    i{
        font-size:9px;
        font-weight: bold;
        color:#fff;
        position:relative;
        top:-2px;
        left:3px;
    }
}

//logo裁剪
#cutpic-modal{
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background-color:rgba(0,0,0,.5); 
    z-index:300; 
    display:none;  
}

.cutpic-content{
    width:685px;
    padding:20px;
    background-color:#fff;
    box-sizing:border-box;
    border-radius: 4px;
    overflow: hidden;
    position:relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.preview{
    margin-left:15px;
    margin-bottom:5px;
    width:150px;
    height:150px;
    overflow:hidden;
}

.current-pic{
  width:480px;
  height:360px;
}

.current-pic-btn{
    margin-top:20px;
    margin-bottom:0;
    text-align: center;
    
    button{
        border:0;
        outline:0;
        color:#fff;
        margin-left:20px;
        margin-right:20px;
    }
    
    .save-cut-logo{
        padding:5px 15px;
        border-radius:4px;
        background-color:$mainColor;
        
        &:hover{
            background-color:#003366;
        }
    }
    
    .cancel-upload-logo{
        padding:3px 8px;
        border-radius:2px;
        color:#333;
        background-color:transparent;
        
        &:hover{
            background-color:#f1f1f1;
        }
    }
}

.hot{
    margin-left:30px;
    
    .hot-bd{
        position:relative;
        
        .change-batch{
            display:inline-block;
            width:80px;
            height:27px;
            line-height:27px;
            position:absolute;
            right:0;
            bottom:0;
            color:$mainColor;
            cursor:pointer;
            
            &:hover{
                text-decoration: underline;
            }
        }
    }
    
    .hot-item{
        width:100%;
        max-height:94px;
        overflow:hidden;
        span{
            display:inline-block;
            width:80px;
            height:27px;
            line-height:27px;
            border:1px solid #c9c9c9;
            border-radius:6px;
            color:#797979;
            margin-top:20px;
            margin-right:15px;
            text-align:center;
            cursor:pointer;
            float:left;
            
            &:hover{color:$mainColor; border-color:$mainColor;}
        }
    }
    
    [data-liffect="bounceIn"] span{
        opacity: 0;
        position: relative;
        -webkit-animation: bounceIn 600ms ease both;
        -webkit-animation-play-state: paused;
        -moz-animation: bounceIn 600ms ease both;
        -moz-animation-play-state: paused;
        -o-animation: bounceIn 600ms ease both;
        -o-animation-play-state: paused;
        animation: bounceIn 600ms ease both;
        animation-play-state: paused;
        -webkit-animation-play-state: running;
        -moz-animation-play-state: running;
        -o-animation-play-state: running;
        animation-play-state: running;
    }
    
    @-webkit-keyframes bounceIn {
        0% { opacity: 0; -webkit-transform: scale(.3); }
        50% { -webkit-transform: scale(1.05); }
        70% { -webkit-transform: scale(.9); }
        100% { opacity: 1; -webkit-transform: scale(1); }
    }
    
    @-moz-keyframes bounceIn {
        0% { opacity: 0; -moz-transform: scale(.3); }
        50% { -moz-transform: scale(1.05); }
        70% { -moz-transform: scale(.9); }
        100% { opacity: 1; -moz-transform: scale(1); }
    }
    
    @-o-keyframes bounceIn {
        0% { opacity: 0; -o-transform: scale(.3); }
        50% { -o-transform: scale(1.05); }
        70% { -o-transform: scale(.9); }
        100% { opacity: 1; -o-transform: scale(1); }
    }
    
    @keyframes bounceIn {
        0% { opacity: 0; transform: scale(.3); }
        50% { transform: scale(1.05); }
        70% { transform: scale(.9); }
        100% { opacity: 1; transform: scale(1); }
    }

}